﻿/*------------------------------------
	[Table of contents]
	1. Body
	2. Header / #header
	3. Navigation / #navbar
	4. Content / #content
	5. Sidebar / #sidebar
	6. Search / #search
	7. Footer / #footer
	
--------------------------------------*/
@import "bootstrap/mixin";
@import "bootstrap/mixin-BG-text";

header{position:absolute;z-index:1;width:100%;
	padding:30px 100px;

	.menu-main{position:relative;padding-top:20px;&::before{position:absolute;width:30px;height:2px;background-color:black;bottom: 8px;@media (max-width: 768px){display: none;}}
	li{padding-right:22px;
	&:first-child{a{padding-left:0;}}
	&.menu-home{
		.dropdown-menu{@include dropdown;	top: 70%;			
					&.menu-home-lv2{left: -20px;padding-left: 20px;
						.li-home{list-style-type: none;padding: 10px 0;i{visibility: hidden;opacity: 0;padding-right: 5px;transition: all .3s ease;
							@media (min-width: 1025px){
								margin-left: -18px;
							}
						}
						
						a{display:inline-block;transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;&:hover{text-decoration:none; color: black;
							font-weight: 600;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
				
		
			.li-banner{padding: 20px 45px;
				img{width: 100%;}
			}
		}
		&:hover{
			@include dropdown-hover;
		}
	}
	&.shop-menu{#shop-1{@include figure;}&:hover{#shop-1{@include figure-hover;}}
	.dropdown-menu{border-radius: 0;border: 0;left: -336px;	top: 70%;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: all .35s ease;
			ul{padding: 10px 0;a{@include font-face(Poppins,14px,600);&:hover{text-decoration:none;opacity: .5;}}
				li{
					list-style-type: none;
					.menu-home-lv2{
						ul{
						.li-home{ margin-left: -18px;padding: 10px 0;@media (max-width: 1024px){margin-left: 0;}
							i{visibility: hidden;opacity: 0;padding-right: 5px;transition: all .3s ease;}
						&.li-one{padding-top: 30px;}
						a{transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;&:hover{text-decoration:none; color: black;font-weight: 600;opacity: 1;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{display:inline-block;text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
					}
				}
			}
			.li-banner{padding: 20px 20px 0 0;
				img{width: 100%;}
			}
		}
		&:hover{
			.dropdown-menu{
				visibility: visible;
				opacity: 1;
				transform: translateY(15px);
			}
		}

	}
	&.wedding-menu{#wedding-1{@include figure;}&:hover{#wedding-1{@include figure-hover;}}}
	&.blog-menu{
		#blog-1{@include figure;}&:hover{#blog-1{@include figure-hover;}}
		.dropdown-menu{@include dropdown;	top: 70%;			
					&.menu-home-lv2{left: -20px;padding:0 20px;width: 300px;
						.li-home{list-style-type: none;padding: 10px 15px;i{visibility: hidden;opacity: 0;transition: all .3s ease;
							@media (min-width: 1025px){
								margin-left: -18px;
							}
						}
						
						a{display:inline-block;transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;padding-left: 5px;
							&:hover{text-decoration:none; color: black;font-weight: 600;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
				
		
			.li-banner{padding: 20px 45px;
				img{width: 100%;}
			}
		}
		&:hover{
			@include dropdown-hover;
		}
	}
	&.contact-menu{#contact-1{@include figure;}&:hover{#contact-1{@include figure-hover;}}}

	a{&:hover{background-color:unset;}@include font-face(Poppins,18px,300);&#home-menu{font-weight:600;}&:focus{background-color:unset;}}
	}
}
.icon-menu{position:relative;padding-top:20px;&::before{content:"3";width:20px;height:20px;background-color:black;position:absolute;text-align: center;right:18px;
border-radius: 50%;
	top: 30px;color: white;}
	li{
	.fa-user{font-size:22px;padding-right:45px;color:black;}
	img{padding-right:15px;&#search-img{margin-right:250px !important;
		@media (max-width: 1600px){
			margin-right:140px !important;
		}
		@media (max-width: 1024px){
			margin-right:34px !important;
			}
			}}
	a{&:hover{background-color:unset;}&:focus{background-color:unset;}}
	&#input-search{
		position:relative;
	.alert-search{position:absolute;width: 230px;top: 50px;right: 40px;background:rgba(255,255,255,0.95);
	border: 0;border-radius: 0;padding: 0 25px;box-shadow:0 10px 10px rgba(0,0,0,0.05);
	.close{position:absolute;top: 4px;right: 6px;}
	.form-group{.form-control{@include input-defaut;border-bottom:1px solid grey;}margin:10px 0;}
	}
	}
	}
}
}
main{
	.content-search{
			position: fixed;
			top: 0;
			left: 0;
			visibility: hidden;
			opacity: 0;
			width: 100%;
			height: 100%;
			background: #fff;
    		-webkit-transition: all 0.3s ease 0s;
    		transition: all 0.3s ease 0s;
    		padding-top: 140px;
    		padding-bottom: 130px;
    		display: inline-block;
    		z-index: 1;
    		.container-100{
    			padding-right: 100px;
    			padding-left: 100px;
    			width: 100%;
    			.fa-times-circle{
    				cursor: pointer;
    				position: absolute;
    				top: 30px;
    				right: 100px;
    				font-size: 50px;
    				color: #ddd;
    				-webkit-transition: all 0.3s ease 0s;
    				transition: all 0.3s ease 0s;
    				&:hover{color:black;}
    			}
    			h3{
    				padding-bottom: 232px;
    				@include font-face(Poppins,50px,bold);
    				line-height: 70px;
    				max-width: 400px;
    				margin: 0 auto;
    				text-transform: uppercase;
    			}
    			form{
    				max-width: 850px;
   					 margin: 0 auto;
    				input{
    					@include input-defaut;
    					border-bottom: 1px solid #ddd;
    					@include font-face(Poppins,30px,400);
    					&::-webkit-input-placeholder{@include font-face(Poppins,30px,400); color: #ddd;}

    				}
    				.button_search{
    					@include btn-shopnow;
   						 text-transform: uppercase;
   						 width: 130px;
   						 height: 45px;
   						 padding: 0;
   						 position: absolute;
   						 top: -12px;
   						 right: 0;
   						 
    				}
    			}
    		}
		}
		.sidebar-cart{
			padding-top: 50px;
			display: inline-block;
			overflow: hidden;
			position: fixed;
			width: 260px;
			right: -260px;
			height: 100%;
			background: #fff;
			-webkit-transition: all 0.3s ease 0s;
    		transition: all 0.3s ease 0s;
    		z-index: 1;
    		.product-cart{
    			display: inline-block;
    			padding: 15px 5px;
    			.img-cart{float: left;width: 30%;}
    			.info-cart{float: left;padding-left: 5px;
    				h1{@include font-face(Poppins,14px,500);margin-top: 0;}
    				span{@include font-face(Poppins,14px,500);
    					&.prince-cart{font-weight: 600;padding-left: 10px;}
    				}
    			}
    		}
    		.fa-times-circle{
    				cursor: pointer;
    				position: absolute;
    				top: 10px;
    				right: 10px;
    				font-size: 30px;
    				color: #ddd;
    				-webkit-transition: all 0.3s ease 0s;
    				transition: all 0.3s ease 0s;
    				&:hover{color:black;}
    			}
		}
	.carousel{position: relative;display: flex;height: 1080px;
	.carousel-inner{
		text-align: left;
		.item{
			padding: 150px 90px 100px 100px;height: 100%;
			h3{@include font-face(Abril Fatface,120px,400);text-align:left;padding: 100px 0 0 30px;&#h1{padding: 0 0 10px 30px;margin-top: 0;}
			&.clip-text{@include clip-text("img/BG-title.jpg",-160px -170px);}
			&.clip-text-2{@include clip-text("img/BG-title.jpg",-160px -316px);}
		}
			p{@include font-face(Poppins,18px,400);color: #888888;padding-left: 30px;&#p1{color: black;padding-top: 150px;margin-bottom: 0;}}
			a{
				@include btn-shopnow;margin: 60px 0 0 30px;padding: 13px 40px;display: inline-block;
			}
		}
			
		
	}
	.carousel-control{
	width:unset;background:unset;opacity:.5;top:80%;right:unset;
	&.right{background-image:unset;left:210px;}
	&.left{background-image:unset;left:150px;img{transform: rotateY(180deg);}}
	&:focus{opacity:1;}&:active{opacity:1;}
	}
	}
	
}
@media (min-width: 1200px){
	.modal-dialog{
		width: 974px;
	height: auto;
	margin: 160px auto;
	}
}
.modal-dialog{
	
	.modal-content{
		border-radius: 0;
		border: 0;
		.close{position: absolute;right: 20px;top: 10px;padding: 5px 9px;opacity: 1;border: 2px solid black;border-radius: 50%;}
		.text-popup{position: absolute;top: 20%;left: 8%;
			h1{@include font-face(Abril Fatface,30px,400);}
			p{@include font-face(Poppins,14px,400);color: #888888;padding-bottom: 30px;}
			input[type="text"]{border-radius: 0;border: 1px solid #e9e9e9;padding-left: 20px;width: 370px;
				&::-webkit-input-placeholder{@include font-face(Poppins,14px,400); color: #888888;}
			}
			button{@include btn-defaut(black);@include btn-shopnow;margin-top: 40px;margin-bottom: 120px;}
			input[type="checkbox"]{margin-right: 10px;opacity: 0;
				&:checked ~ .checkmark{background:black;}
			}
			label{@include font-face(Poppins,14px,400);color: #888888;position: relative;bottom: 8px;
				.checkmark{position: absolute;display: inline-block;width: 10px;height: 10px;border: 1px solid #888888;left: 5px;top: 8px;cursor: pointer;
					
				}
			}
		}
	}
}
body{@include background-image("img/BG-v2.jpg",0 0,auto);}
.slide-1{@include background-image("img/BG-slide1-v2.png",-300px -90px,auto);}
.slide-2{@include background-image("img/BG-slide2-v2.png",0 0,auto);}
.slide-3{@include background-image("img/BG-slide3-v2.png",-246px 0,auto);}
@media (max-width: 1600px){
	.modal-dialog{
		margin: 66px auto;
	}
	header{
		.menu-main{
			li{
				padding-right: 0;
			}
		}
	}
	main{
		.carousel{
			.carousel-inner{
				.item{
					padding: 150px 90px 100px 100px;
					h3{font-size: 80px;padding: 0;
						&#h1{padding-left: 0;}
					}

					p{font-size: 18px;padding-left: 0;
						&#p1{padding-top: 40px;}
					}
					a{
						margin: 30px 0 0 0;
    					padding: 10px 30px;
    					font-size: 14px;
					}
				}
			}
			.carousel-control{
				    top: 586px;
				&.left{left: 120px;}
				&.right{left: 180px;}
			}
		}
	}
	
}

@media (max-width: 1199px){
	.modal-dialog{
		width: 800px;
		.modal-content{
			.text-popup{top: 0%;left: 3%;}
		}
	}
	header{
		.menu-main{
			li{
				padding-right: 19px;
				a{	
					font-size: 14px;
					padding: 15px 0
				}
				&.shop-menu{
					.dropdown-menu{
						left: -290px;
					}
				}
			}
		}
		img{width: 90%;
			&#search-img{width: 44%;}
		}
		.icon-menu{
			li{
				.fa-user{font-size:18px;}
			}
		}
	}
	main{
		.carousel{
			.carousel-inner{
				.item{
					padding: 220px 90px 100px 100px;
					h3{font-size: 60px;padding: 0;
						&#h1{padding-left: 0;}
					}

					p{font-size: 14px;padding-left: 0;
						&#p1{padding-top: 40px;}
					}
					a{
						margin: 30px 0 0 0;
    					padding: 10px 30px;
    					font-size: 14px;
					}
				}
			}
			.carousel-control{
				top: 540px;
				&.left{left: 120px;}
				&.right{left: 180px;}
			}
		}
	}
	
}
@media (max-width: 991px){
	.modal-dialog{
		width: 700px;
	}
	header{
		.navbar-toggle{
			position: absolute;top: 44px;right: 43px;float: unset;margin: 0;padding: 0;
			.icon-bar{height: 3px;
    			border-radius: 10%;
    				background: black;}
		}
		.menu-mobile{
			position: absolute;
    		background: #fff;
    		top: 0;
    		left: 0;
    		height: 0;
    		overflow: hidden;
    		transition: all .3s ease;
    		#myNavbar{padding: 26px 15px;}
		}
		
		padding: 30px 15px;
		
		.menu-main{
			
			padding-top: 0;
			li{
				&.menu-home{
					.dropdown-menu{display: none;
						&.menu-home-lv2{
							margin-top: -28px;padding-left: 50px;
							.li-home{
								a{padding: 0}
							}
						}
					}

				}
				&.shop-menu{
					.dropdown-menu{display: none;margin-top: -42px;}
				}
			}
		}
		img{width:unset;
			&#search-img{width: unset;}
		}
		.icon-menu{padding-top: 0;    padding-right: 80px;
			&::before{top:10px;right: 80px;}
			li{
				float: left;
				.fa-user{font-size: 22px;}
				&#input-search{padding-right: 20px;}
				a{padding-right: 0;}
				img{
					&#search-img{margin-right: 0 !important;}
				}
			}
		}
	}
	main{
		
		.carousel{
			.carousel-inner{
				.item{
					padding: 220px 20px 100px 20px;
					p{
						&#p1{padding-top: 0;}
					}
					a{
						margin: 10px 0 0 0;
    					padding: 8px 20px;
    				}
				}
				
			}
			.carousel-control{
				top: 540px;
				&.left{left: 34px;}
				&.right{left: 90px;}
			}
		}
	}
	.modal-dialog{
		.modal-content{
			.text-popup{
				top: 0%;
    			left: 3%;
    			label{bottom: 106px;}
			}
		}
	}
}
@media (max-width: 812px) and (max-height: 414px){
	header{padding: 8px 15px;
		.navbar-toggle{top: 22px;}
	}
	main{
		.content-search{
			padding-top: 30px;
    		padding-bottom: 30px;
    		.container-100{
    			h3{
    				    padding-bottom: 85px;
    			}
    		}
		}
		.carousel{
			.carousel-control{
				top: 315px;
				&.left{left: 230px;}
				&.right{left: 290px;}
			}
			.carousel-inner{
				.item{padding: 57px 20px 100px 20px;}
			}
		}
	}
	.modal-dialog{    margin: 0px auto;}
}
@media (max-width: 736px) and (max-height: 414px){
	header{
		.icon-menu{    padding: 0 0 0 250px;}
		.navbar-toggle{top: 30px;}
	}
	main{
		.carousel{
			.carousel-inner{
				.item{padding: 96px 20px 100px 20px;}
			}
		}
	}
}
@media (max-width: 667px) and (max-height: 414px){
	.modal-dialog{
		width: 500px;
	}
	header{
		.icon-menu{    padding: 0 0 0 196px;}
		
	}
	main{
		.carousel{
			.carousel-inner{
				.item{
					a{margin: 0;}
				}
			}
		}
	}
}
@media (max-width: 568px) and (max-height: 320px){
	header{
		.icon-menu{    padding: 0 0 0 122px;}
		
	}
	main{
		.content-search{
			padding-top: 30px;
    		padding-bottom: 30px;
    		.container-100{
    			.fa-times-circle{
    				right: 30px;
    			}
    			h3{
    				padding-bottom: 36px;
    				line-height: 45px;
    			}
    		}
		}
		.carousel{
			.carousel-control{
				top: 269px;
				&.left{left: 180px;}
				&.right{left: 240px;}
			}
			.carousel-inner{
				.item{
					h3{font-size: 36px;margin-top: 0;}
				}
			}
		}
	}
}
@media (max-width: 567px){
	.col-xs-6{width: 100%;}
	.modal-dialog{
		width: auto;
		margin: 150px 10px;
		.modal-content{
			.close{
				top: 1px;
				right: 1px;
			}
			.text-popup{
				left: 2%;
				top: -8%;
				h1{font-size: 20px;}
				input[type="text"]{padding-left: 10px;width: 170px;height: 30px;}
				button{font-size: 14px;padding: 5px 10px;    margin-top: 10px;margin-bottom: 20px;}
				label{bottom: 8px;}
			}
		}
	}
	.nav{
		.li-icon{
			display: inline-block;
			a{
				padding: 15px 6px;
				.fa-user{
					font-size: 22px;
					padding-right: 23px;	
					
				}
			}
		}
	}
	header{
		padding: 0;
		.menu-mobile{
			position: absolute;
			background: #fff;
		}
		.icon-menu{
			display: inline-block;
   			 padding: 0 0 0 77px;
   			 &::before{top:16px;right: 8px;}
			li{
				img{display: inline-block;
					
				}
				&#input-search{padding-right: unset;
					.alert-search{
						right: unset;left: -90px;top: 56px;
					}
				}
			}
		}
		.navbar-toggle{
			position: absolute;top: 26px;right: 10px;float: unset;margin: 0;padding: 0;
			.icon-bar{height: 3px;
    			border-radius: 30%;
    				background: black;}
		}
		
	}
	.logo-mobile{
		padding: 10px 0 20px 10px;
	}
	main{
		.content-search{
			padding-top: 66px;
    		.container-100{
    			.fa-times-circle{
    				right: 30px;
    			}
    			h3{
    				padding-bottom: 70px;
    			}
    			form{
    				input{
    					&::-webkit-input-placeholder{font-size:20px;}
    				}
    				.button_search{
    					top: 50px;
    					right: 45px;
    				}
    			}
    		}
		}
		.carousel{
			.carousel-inner{
				.item{
					padding: 90px 20px 0 20px;
					h3{font-size: 40px;padding: 0;
						&#h1{padding-left: 0;}
					}

					p{font-size: 14px;padding-left: 0;
						&#p1{padding-top: 40px;}
					}
					a{
						margin: 10px 0 20px 0;
    					padding: 5px 15px;
    					font-size: 14px;
					}
				}
			}
			.carousel-control{
				top: 260px;
				&.left{left: 222px;}
				&.right{left: 282px;}
			}
		}

	}
}
@media (max-width: 320px){
	header{
		.icon-menu{
			    padding: 0px 0 0 40px;
		}
	}
	main{
		.content-search{
    		.container-100{
    			h3{
    				font-size: 40px;line-height: 55px;
    			}
    			form{
    				input{
    					&::-webkit-input-placeholder{font-size:14px;}
    				}
    				.button_search{
    					
    					right: 0;
    				}
    			}
    		}
		}
		.carousel{
			.carousel-inner{
				.item{
					padding: 70px 20px 0 20px;
				}
			}
			.carousel-control{
				
				&.left{left: 190px;}
				&.right{left: 250px;}
			}
		}

	}
}
